<!--
 * @Author: Liz.Zheng
 * @Date: 2021-11-15 16:16:07
 * @LastEditTime: 2023-02-22 11:29:06
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 项目管理
 * @Motto: Write the code. Change the world.
-->
<template>
  <div class="project-list">
    <a-card>
      <a-row :gutter="[12, 10]" type="flex">
        <a-col :xxl="4" :xl="4" :lg="4" :md="5" :xs="16">
          <Statistic
            title="管理面积"
            :value="statisticData.management_area"
            suffix="㎡"
          />
        </a-col>
        <a-col :xxl="4" :xl="4" :lg="4" :md="5" :xs="8">
          <Statistic :value="statisticData.rentable_area" suffix="㎡">
            <template #title>
              <span>
                可招商面积
                <a-tooltip>
                  <template #title
                    >当前录入的所有招商状态为招商的房源面积之和</template
                  >
                  <QuestionCircleOutlined />
                </a-tooltip>
              </span>
            </template>
          </Statistic>
        </a-col>
        <a-col :xxl="4" :xl="4" :lg="4" :md="5" :xs="16">
          <Statistic
            title="可招商占比"
            :value="statisticData.rentable_scale"
            suffix="%"
          />
        </a-col>
        <a-col :xxl="4" :xl="4" :lg="4" :md="4" :xs="8">
          <Statistic
            title="总房源数量"
            :value="statisticData.room_count"
            suffix="间"
          />
        </a-col>
        <a-col>
          <Statistic
            title="可招商房源数量"
            :value="statisticData.room_rentable_count"
            suffix="间"
          />
        </a-col>
        <a-col class="tipIcon">
          <a-popover placement="leftBottom">
            <template #content>
              <div>
                <div style="width: 200px">
                  <Statistic
                    title="使用上限"
                    :value="statisticData.use_limit_scale"
                    suffix="%"
                  />
                </div>
                <div style="margin-bottom: 10px">
                  <a-progress
                    :percent="statisticData.use_limit_scale"
                    :show-info="false"
                  />
                </div>
                <div
                  style="border-top: 1px solid #e9e9e9; margin-bottom: 10px"
                />
                <div>
                  <span style="color: #929292">可使用最大面积 :</span>
                  {{ statisticData.max_use_area }}m²
                </div>
              </div>
            </template>
            <InfoCircleOutlined
              style="color: orange"
              v-if="statisticData.use_limit_scale >= 90"
            />
          </a-popover>
        </a-col>
      </a-row>
    </a-card>
    <a-table
      class="mt-10"
      :dataSource="projectList"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
      rowKey="id"
      :scroll="{ x: 'max-content' }"
      sticky
    >
      <template #title>
        <a-row type="flex" class="table-header">
          <a-col flex="auto"> {{ $L("项目列表") }} </a-col>
          <a-col>
            <a-button
              type="primary"
              @click="projectEdit()"
              v-permission="['villageList', 'curd', 'add']"
            >
              <template #icon>
                <PlusOutlined />
              </template>
              新建{{ $L("项目") }}
            </a-button>
          </a-col>
        </a-row>
      </template>

      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'view'">
          <a-button type="link" @click="viewDetail(record.id)">查看</a-button>
        </template>
        <template v-if="column.key === 'action'">
          <a-button type="link" @click="projectDetail(text)">详情</a-button>
          <a-button
            type="link"
            danger
            @click="projectDel(text)"
            v-permission="['villageList', 'curd', 'delete']"
            >删除</a-button
          >
        </template>
      </template>
    </a-table>
    <ProjectDetail
      :visible="detailVisible"
      :id="detailId"
      :showDel="true"
      @cancel="handleDetailClose"
      @edit="projectEdit"
      @remove="deleteSuccess"
    />

    <ChooseVillageType
      :visible="chooseTypeVisible"
      @close="chooseTypeVisible = false"
    />

    <Commonphont :visible="detailphone" :id="detailId" @cancel="phoneClose" />
  </div>
</template>

<script>
import { defineComponent, ref, computed, createVNode } from "vue";
import {
  PlusOutlined,
  QuestionCircleOutlined,
  InfoCircleOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import request from "../../../common/utils/request";
import { Statistic, Modal, message } from "ant-design-vue";
import store from "../../../store";
import ChooseVillageType from "./modules/ChooseVillageType.vue";
import BLCOMMON from "bl-common-vue3";
import ProjectDetail from "./ProjectDetail.vue";
import Commonphont from "./Commonphont.vue";

export default defineComponent({
  name: "villageList",
  components: {
    PlusOutlined,
    Statistic,
    ProjectDetail,
    QuestionCircleOutlined,
    InfoCircleOutlined,
    ChooseVillageType,
    Commonphont,
  },
  setup() {
    const projectList = ref([]);

    const page = ref(1);
    const limit = ref(20);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));
    const loading = ref(false);
    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      getProjectList();
    };

    const statisticData = ref({});
    const getProjectList = () => {
      request
        .get("/village", "/project/manage", {
          page: page.value,
          pageSize: limit.value,
        })
        .then((res) => {
          statisticData.value = res.countData;
          projectList.value = res.list;
          total.value = res.total;
        });
    };

    const $router = useRouter();

    const chooseTypeVisible = ref(false);
    const projectEdit = (detail) => {
      let query = {};
      if (detail && detail.id) {
        handleDetailClose();
        query = { id: detail.id };
        $router.push({ name: "projectEdit", query });
      } else {
        request.get("/village", "/village/type/list").then((res) => {
          if (res.list.length == 1) {
            $router.push({
              name: "projectEdit",
              query: { type: res.list[0].alias },
            });
          } else {
            chooseTypeVisible.value = true;
          }
        });
      }
    };

    // 详情
    const detailVisible = ref(false);
    const detailId = ref(0);
    const projectDetail = (id) => {
      detailId.value = id;
      detailVisible.value = true;
    };
    const handleDetailClose = () => {
      detailVisible.value = false;
    };

    const detailphone = ref(false);
    const viewDetail = (id) => {
      detailId.value = id;
      detailphone.value = true;
    };
    const phoneClose = () => {
      detailphone.value = false;
    };

    // 删除项目
    const projectDel = (id) => {
      let name = BLCOMMON.utils.L("项目");
      Modal.confirm({
        title: () => `确认删除该${name}吗?`,
        icon: () => createVNode(ExclamationCircleOutlined),
        centered: true,
        onOk: () => {
          request.del("/village", "/project/manage", { id }).then(() => {
            deleteSuccess();
          });
        },
      });
    };

    // 删除成功回调
    const deleteSuccess = () => {
      message.success("删除成功");
      detailVisible.value = false;
      page.value =
        projectList.value.length == 1 && page.value > 1
          ? page.value - 1
          : page.value;
      getProjectList();
      store.dispatch("GetUserInfo");
    };

    const init = () => {
      getProjectList();
    };
    init();

    const columns = [
      { title: BLCOMMON.utils.L("项目名称"), dataIndex: "name" ,width:200},
      { title: "管理面积（㎡）", dataIndex: "management_area" ,width:200},
      { title: "可招商面积（㎡）", dataIndex: "rentable_area",width:200 },
      { title: "总房源数量（间）", dataIndex: "room_count",width:200 },
      { title: "可招商房源数量（间）", dataIndex: "room_rentable_count",width:200 },
      { title: "常用电话", dataIndex: "view", key: "view",width:100 },
      {
        title: "操作",
        dataIndex: "id",
        key: "action",
        fixed: "right",
        width: store.getters.isMobile ? 70 : 180,
      },
    ];

    return {
      loading,
      columns,
      projectList,
      pagination,
      statisticData,
      detailVisible,
      detailId,
      chooseTypeVisible,
      detailphone,
      handleTableChange,
      projectEdit,
      projectDetail,
      handleDetailClose,
      deleteSuccess,
      projectDel,
      viewDetail,
      phoneClose,
    };
  },
});
</script>

<style lang="less" scoped>
.project-list {
  padding: 10px;
  .table-header {
    padding: 0 10px;
    font-weight: bold;
  }
  .tipIcon {
    flex: 1;
    text-align: end;
  }
}
</style>
